<template>
  <div class="teacher-course-list">
  <h2>授课查询</h2>
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true" :model="query" size="small">
        <el-form-item label="课程名">
          <el-input v-model="query.name" placeholder="课程名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="list" v-loading="loading" stripe style="width:100%;margin-top:12px;">
      <el-table-column prop="id" label="课程ID" width="90" />
      <el-table-column prop="name" label="课程名" min-width="140" />
      <el-table-column prop="gradeDisplay" label="年级" width="80" />
      <el-table-column prop="credit" label="学分" width="70" />
      <el-table-column prop="time" label="上课时间" min-width="140" />
      <el-table-column prop="location" label="上课地点" min-width="140" />
      <el-table-column prop="selectedCountDisplay" label="选课人数" width="90" />
      <el-table-column prop="maxSize" label="容量" width="70" />
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="page"
        @current-change="fetchData" />
    </div>
  </div>
</template>
<script>
import { getTeacherCourseList } from '@/api'
export default {
  name:'TeacherCourseList',
  data() { return { query:{ name:'' }, fullList:[], list:[], loading:false, page:1, pageSize:10, total:0, teacherName:'' } },
  created() {
    const info = this.$store.state.user.userInfo || JSON.parse(localStorage.getItem('userInfo')||'{}')
    this.teacherName = info.username || info.name || ''
    this.fetchData()
  },
  methods:{
    async fetchData() {
      this.loading = true
      try {
        // 后端教师授课接口（不分页）
        const res = await getTeacherCourseList()
        let list = res.data || []
        // 过滤当前教师（若后端接口已筛选，可以省略）
        if (this.teacherName) {
          list = list.filter(c => !c.teacherName || c.teacherName === this.teacherName)
        }
        // 搜索过滤
        if (this.query.name) {
          list = list.filter(c => (c.name || '').includes(this.query.name))
        }
        this.fullList = list.map(c => ({
          ...c,
          gradeDisplay: c.grade || c.gradeName || c.year || '—',
          selectedCountDisplay: c.selectedCount != null ? c.selectedCount : (c.currentSize != null ? c.currentSize : (c.enrolled != null ? c.enrolled : '—'))
        }))
        this.total = this.fullList.length
        const start = (this.page - 1) * this.pageSize
        this.list = this.fullList.slice(start, start + this.pageSize)
      } catch(e) { console.error(e); this.$message.error('加载授课信息失败') } finally { this.loading=false }
    },
    search(){ this.page=1; this.fetchData() },
    reset(){ this.query={ name:'' }; this.search() }
  }
}
</script>
<style scoped>
.teacher-course-list { padding:16px; }
.filter-card { margin-top:8px; }
.pagination-wrapper { margin-top:12px; text-align:right; }
</style>
